{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\froman\fcharset0 Cambria;}{\f1\fswiss\fcharset0 Calibri;}}
{\colortbl ;\red0\green0\blue127;\red255\green0\blue0;\red255\green255\blue0;\red0\green0\blue0;\red192\green192\blue192;}
{\*\generator Msftedit 5.41.15.1507;}\viewkind4\uc1\pard\sa300\sl480\slmult1\kerning28\f0\fs44 Lecture note for Web Design Training Seminar\par
TRAINING GUIDE\kerning0\b\fs32\par
\pard\sa200\sl480\slmult1\f1\fs28 Definition of HTML\line\b0\fs22  HTML stands for \cf1\i\fs24 H\cf0\i0\fs22 yper\cf1\i\fs24 T\cf0\i0\fs22 ext \cf1\i\fs24 M\cf0\i0\fs22 arkup \cf1\i\fs24 L\cf0\i0\fs22 anguage. It is a subset of SGML (Standard General Markup Language) and is the language used to define the layout and attributes of a World Wide Web document as well as to create links between web documents (documents being text, sound, or graphics). HTML may appear intimidating at first, but once you begin to get the feel of it, there is little to be worried about. HTML is a combination of a number of codes made up of tags and attributes that make up the HTML documents and identify their characteristics.\b\fs28\par
\fs22  \fs28 HTML documents and HTML editors\line\fs22  \b0 Notepad, Any word processor package such as Microsoft Internet Assistant, and Dreamweaver. Some clients (browsers) require internet file names to have an ".html" extension (for DOS/Windows users, this is an ".htm" extension). Therefore, HTML documents are created with the ".html" naming convention.\b\fs28\par
Introduction to tags and tag structure\fs22 :\line\b0 Tags are used to define the structure of an HTML document, while some of them are used to contain references to other files (such as text, sound and video files). For example, if you want to include heading paragraph and a list to your document, you type all the text and apply the various appropriate tags. HTML tag syntax is as follows: <tag>. It\rquote s surrounded by a left and right angle bracket. E.g. <h3> \'85\'85\'85\'85\'85\'85\'85Stands for a level 3 header. We have paired tags(Those that need to be closed after opening) and stand alone tags(Tags that do not need closing tags)\par
E.g. of paired tag : <P> ----text---</p>\par
E.g. of standalone tag: <br>\par
\b\fs28 Components of HTML code: \par
\b0\fs22 A typical HTML syntax is as follows: <TAG name ATTRIBUTE name = \ldblquote value of attribute\rdblquote > Line of text. </TAG>\par
e.g. < font color=\rdblquote Red\rdblquote >.\par
<font> : \cf1\i Font tag\cf0\i0 , Color: \cf1\i font attribute\cf0\i0 , Red: \cf1\i attribute desired for font\cf0\i0 . Note, font is the style or character print. You could picture it as a \ldblquote writing\rdblquote  type on screen.\par
The components can be summarized as follows:\par
\pard{\pntext\f1 1.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1\b Angle brackets\b0 : The angle brackets separate the HTML tags from the ordinary text.\par
\pard{\pntext\f1 2.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1\b Tag name\b0 : All the tags have names. These names, when used enclosed within the angle brackets in a document, mark the inclusion of that tag in the document.\par
\pard{\pntext\f1 3.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart3\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1\b Attribute\b0 : This is sometimes included with the HTML tags to add some special features to them. For example, the color attribute when associated with the font tag enables us to give a color to our text.\par
\pard{\pntext\f1 4.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart4\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1\b Value\b0 : Some attributes require the inclusion of values. In the above example, the inclusion of red as a value of color makes our text to appear red. Other colors may be used.\par
\pard{\pntext\f1 5.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart5\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1\b </tag>\b0 : The name of the tag preceded by a forward slash (/), and enclosed within angle brackets marks the closure of the tag.\par
\pard\sa200\sl480\slmult1\par
\b\fs28 Sample HTML document and displaying a web page in a browser window\par
\b0\fs22 Launch a notepad application:\par
\pard{\pntext\f1 1.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1 Click on the start button on your computer task bar. A push up menu appears on the screen.\par
\pard{\pntext\f1 2.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1 Position the mouse pointer on the programs option in this menu. Upon this, a sub menu appears.\par
\pard{\pntext\f1 3.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart3\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1 Position your mouse pointer on the accessories option of this menu. Another submenu appears beside the accessories option.\par
\pard{\pntext\f1 4.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart4\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1 Click on the notepad option of this sub menu. An untitled notepad appears on the computer screen.\par
\pard\sa200\sl480\slmult1 Write The Code:\par
Let\rquote s now see how to write the HTML code. Carry out the following steps:\par
\pard{\pntext\f1 1.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec{\pntxta.}}
\fi-360\li360\sa200\sl480\slmult1 First save the untitled document by clicking on file \tab   save option. The save as dialog box appears on the screen.\par
\pard{\pntext\f1 2.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec{\pntxta.}}
\fi-360\li360\sa200\sl480\slmult1 Double click on the folder you want to save the document, say web1.\par
\pard{\pntext\f1 3.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart3\pndec{\pntxta.}}
\fi-360\li360\sa200\sl480\slmult1 Enter a name for the document in the file name box, say sample.html. Take note of the .html extension\par
\pard{\pntext\f1 4.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart4\pndec{\pntxta.}}
\fi-360\li360\sa200\sl480\slmult1 Click on save.\par
\pard\sa200\sl480\slmult1\par
There are some basic HTML tags that should be added to every web page of a web site. They include the HTML, HEAD, TITLE, and BODY tags. Sometimes the ADDRESS tag is also included to hold the copyright information, and address.\par
HTML Tags:  The document is enclosed with the html tags. <html> </html>.\par
\par
Head Tags: The head tags are used to store information about the web page such as the title of the page.  <head></head>\par
\par
Title tags: Title Tags are used to enter a title for the web page. The title contains any alphabet and/or number.  Its normally placed within the head section.\par
<head><title> ----your title goes here-----</title></head>\par
\par
Body tags. All the contents of the web page except the title should be enclosed within the body tags. <body> </body>\par
\par
\b\fs28 Sample HTML document and displaying a web page in a browser window.\par
\pard{\pntext\f1 1)\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec{\pntxta)}}
\fi-360\li720\sa200\sl480\slmult1\b0\fs22 Launch notepad application by : Clicking Start on your taskbar, then programs, accessories, and notepad.\par
\pard{\pntext\f1 2)\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec{\pntxta)}}
\fi-360\li720\sa200\sl480\slmult1 Type the following HTML codes :\par
\pard\sa200\sl480\slmult1 <html>\par
<head>\par
\tab <title> Hello Nigeria ! </title>\par
<body>\par
This is my first HTML document\'85.It\rquote s fun writing html codes.\par
</body>\par
</html>\par
\pard{\pntext\f1 3)\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart3\pndec{\pntxta)}}
\fi-360\li720\sa200\sl480\slmult1 Save file by clicking FILE, SAVE. A save as dialog box shows. Type a file name for your web document. E.g. hello.html. The .html extension is compulsory. Specify a location on your hard drive to store the document.\par
\pard{\pntext\f1 4)\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart4\pndec{\pntxta)}}
\fi-360\li720\sa200\sl480\slmult1 Launch your web document by double clicking or right clicking and choosing open.\par
\pard\sa200\sl480\slmult1 Notice, the file opens in a browser window.\par
\b\fs28 Section Headings, <h1> to <h2>\line\b0\fs22 Adding headings to your web page makes it appear more organized. In HTML, there are six levels of headings. <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.\tab Level one, <H1> is the largest and this decreases progressively to <H6>, the smallest.\par
To see the effect of these various headings, type the following text after the starting of the <body tag>.\par
Below are each of the six headers and how they usually appear in relation to one another. The syntax as represented below is Code, then, browser output.\par
\pard\fi720\sa200\sl480\slmult1\fs20\ldblquote HTML code\fs22  \par
\cf2\fs20 Browser output \rdblquote .\fs22\par
\cf0  <h1>This is a header 1 tag</h1>\par
\cf2\b\fs44 This is a header 1 tag\par
\cf0\b0\fs22 <h2>This is a header 2 tag</h2>\par
\cf2\b\fs40 This is a header 2 tag\par
\cf0\b0\fs22 <h3>This is a header 3 tag</h3>\par
\cf2\b\fs36 This is a header 3 tag\par
\cf0\b0\fs22 <h4>This is a header 4 tag</h4>\par
\cf2\b\fs32 This is a header 4 tag\par
\cf0\b0\fs22 <h5>This is a header 5 tag</h5>\par
\pard\li720\sa200\sl480\slmult1\cf2\b\fs28 This is a header 5 tag\par
\pard\fi720\sa200\sl480\slmult1\cf0\b0\fs22 <h6>This is a header 6 tag</h6>\par
\cf2\b\fs24 This is a header 6 tag\par
\pard\sa200\sl480\slmult1\cf0\b0\fs22 Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).\par
\par
\line\b\fs28 Defining paragraphs\line\b0\fs22 The web browsers do not usually display the paragraph breaks that you have given while typing a block of text in your HTML editor. This is more so if we are displaying a huge amount of text, and we don\rquote t want it appearing so packed up. We must use the paragraph tags for dividing our text into paragraphs.\par
To insert a paragraph, type <p> ,Type the text to be contained in a paragraph then, end the paragraph by typing </p>.\par
\b\fs28 Inserting line breaks\line\b0\fs22 This can be done using the <br> tag. It inserts a blank line below a block of text.\par
\b\fs28 Inserting space\b0\fs22\par
The web browser takes only one space after each word and ignores any extra space given in the HTML editor. To add more than one space in your document, click where you want to add space and type &nbsp, a code for a blank space. \par
\b\fs28 Preformatting text\par
\pard\sa200\sl276\slmult1\b0\fs22 The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space; even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font.\par
\par
<pre> \cf2 this is \par
\par
               an example \par
               of a    preformatted \par
        text tag\cf0 </pre>\par
\i\fs20 And this is how it displays: \par
\cf2\i0\fs22 this is \par
\par
               an example \par
               of a    preformatted \par
        text tag        \par
\pard\sa200\sl480\slmult1\cf0 Note, the empty spaces are not removed by the browser as it usually does.\par
\b\fs28 Font tags\b0\fs22\line This tag lets us set the following attributes to our text. The font type, color and size.\line e.g.  <font color =\rdblquote red\rdblquote  type =\rdblquote Arial\rdblquote  size=\rdblquote 3\rdblquote > Check me out </font>\par
The browser output is: \cf2 Check me out\par
\cf0\b\fs28 Changing background color\b0\fs22\line This can be achieved by specifying the color attribute of the body tag. <body bgcolor=\rdblquote blue\rdblquote >.\par
\b\fs28 List; ordered and unordered list\b0\fs22\line Sometimes, we need to display items in a web page in the form of a list. We can use various list tags to create ordered, unordered and definition list.\par
\b Ordered list s\b0  appears with a sequence of numbers and alphabets.  The <ol> tag in conjunction with a <li> tag lets you create a simple list. \par
The following code snippet creates an ordered list with three items.\par
<html>\line <head> <title> Shopping items</title> \line </head>\line <body>\par
Here are some important shopping items\par
<ol>\line <li> Stationary\par
<li>Cosmetic\line <li>Grocery\par
</ol>\par
</body>\par
</html>\par
Browser output: \par
Here are some important shopping items\par
\pard{\pntext\f1 1.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1 Stationary\par
\pard{\pntext\f1 2.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1 Cosmetics\par
\pard{\pntext\f1 3.\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart3\pndec{\pntxta.}}
\fi-360\li720\sa200\sl480\slmult1 Grocery\par
\pard\sa200\sl480\slmult1 Unordered list\par
Items in unordered list appear with bullets or some type of symbol. The <ul> tag is used to create unordered list.\line The following code snippet creates an ordered list with three items.\par
<html>\line <head> <title> Shopping items</title> \line </head>\line <body>\par
Here are some important shopping items\par
<ul>\line <li> Stationary\par
<li>Cosmetic\line <li>Grocery\par
</ul>\par
</body>\par
</html>\par
Browser output: \par
Here are some important shopping items\par
\pard{\pntext\f1 1\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec }
\fi-360\li720\sa200\sl480\slmult1 Stationary\par
\pard{\pntext\f1 2\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec }
\fi-360\li720\sa200\sl480\slmult1 Cosmetics\par
\pard{\pntext\f1 3\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart3\pndec }
\fi-360\li720\sa200\sl480\slmult1 Grocery\par
\pard\sa200\sl480\slmult1\b\fs28 Inline Elements\par
\b0\fs22 Let\rquote s learn the syntax of some important inline elements.\par
<i> - This displays text in italics. The syntax is <I>check me out </i>\par
\cf1 Browser output\cf0 : \i check me out\i0\par
<b> - This displays text in bold letters. The syntax is <b>check me out </b>\par
\cf1 Browser output\cf0 : \b check me out\par
\b0\par
\par
<u> - This underlines a text. The syntax is <u>check me out </u>\par
\cf1 Browser output\cf0 : \ul check me out\par
\ulnone <em> - This is used to emphasize a text and make it look different. The syntax is <em>check me out </em>\par
\cf1 Browser output\cf0 : \i\fs24 check me out\i0\fs22\par
<hr> Inserts a horizontal rule.\par
\pard\sa200\sl276\slmult1\b\fs28 Uniform resource locators (URL)\par
\b0\fs22 When someone has information they want you to access via the Web, they'll give you its electronic address, its URL. URLs are unique to each document and are a relatively easy way to navigate between millions of online documents. \par
Knowing a documents URL allows you to go directly to it. For example, you can contact us through the following URLs: \cf3\ul www.phloxxintertech.com\cf0\ulnone , \cf3\ul www.conmasol.com\cf0\ulnone . \par
\b\fs28 Types of URL\par
\b0\fs22 URLs vary according to the location of the document to which you are linking. Basically, URLs fall into two categories:\par
\pard{\pntext\f1 1\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec }
\fi-360\li720\sa200\sl276\slmult1 Absolute\par
\pard{\pntext\f1 2\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec }
\fi-360\li720\sa200\sl276\slmult1 Relative\par
\pard\sa200\sl276\slmult1 An absolute URL contains all the information necessary to identify files on the Internet. A relative URL points to files in the same folder or one same server. In other words, the file linked to is relative to the originating document.  \par
\pard\sa200\sl480\slmult1 Absolute URLs contains the protocol indicator, hostname , folder name and file name.\line e.g. \cf3\ul http://www.altavista.com.digital.com/\cf0\ulnone\par
Relative URLs usually contains only the folder name and file name or even just the file name. \line E.g. services/marketing.com\par
\b\fs28 Hypertext links\par
\b0\fs22 The real power of HTML is its ability to have the browser display another page of the web site or any of the web simply by clicking on some other text image or figure. This click sensitive elements that when clicked opens some other web page is known as a hyperlink. Links are usually highlighted or underlined in a document so that you know of their existence.  E.g. \cf3\ul www.conmasol.com\cf0\ulnone   Clicking on the link opens up the document for viewing. \par
\pard\sa200\sl276\slmult1\b\fs28 Linking to other documents\par
\pard\sa200\sl480\slmult1\b0\fs22 The anchor tag <a> is used in creating hyperlinks. Therefore, to link to a file on a Web server, your HTML tag would look like: <a href="http://www.phloxxintertech.com/"> Welcome to Phloxx Intertech </a>\par
The text that appears between the beginning and ending tags ("Welcome to Phloxx Intertech" in the above example) is the text that is the link the reader clicks on to go to that URL. \line When you make a link, imagine you're creating two anchor points: one exists in your document (the text to click on), while the other is the document to which you're linking. You basically create a thread between two points.\par
Here are what the parts mean:\line <a >                   -- starts the anchor\par
href                  -- stands for "hypertext reference"\par
\cf3\ul http://www.phloxxintertech.com/\cf0\ulnone    -- the URL of the other document\par
Welcome to Phloxx Intertech       -- the text that will appear and be clickable\par
</a>                   --  ends the anchor.\line As long as you know the URL for a file, you can create a link to it.\par
\b\fs28 The Anchor tag\line\b0\fs22 As explained earlier, <a> or anchor tag is used to create hyperlinks. It has the following properties: \i Name\i0  and\i  href\i0 . <a name=\rdblquote shoplink\rdblquote  href=\cf3\ul www.shopstar.com\cf0\ulnone\rdblquote >\par
\par
\b\fs28\line Types of hyperlinks\par
\pard{\pntext\f1 1\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart1\pndec }
\fi-360\li720\sa200\sl276\slmult1\b0\fs22 Implicitly anchored hyperlink: \endash  The link which opens when some other web page in the web browser is known as an implicitly anchored hyperlink.  E.g. \cf3\ul www.pioneerapplause.com\cf0\ulnone\par
\pard{\pntext\f1 2\tab}{\*\pn\pnlvlbody\pnf1\pnindent360\pnstart2\pndec }
\fi-360\li720\sa200\sl276\slmult1 Explicitly anchored hyperlink: - The link, which when clicked display some other portion or section of the same web page, is known as an explicitly anchored hyperlink.  Its done using named anchors.\par
\pard\sa200\sl276\slmult1\b\fs28 Creating  Explicitly anchored hyperlinks \par
\b0\fs22\tab\b Anchors within the same document\b0 : To link to a specific section within the same document, you must define an anchor name inside the document and then link to it.  Practice the following example : \par
<html>\par
<head><title> Explicit anchors </title>\par
</head>\par
<body>\par
<a name=\rdblquote top\rdblquote   href=\rdblquote #bottom\rdblquote > Top page </a>\par
Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc  Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc \par
Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc \par
Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc  Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc \par
Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc \par
Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc  Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc \par
Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc Abc abc abc abc \par
<a name=\rdblquote bottom\rdblquote  href=\rdblquote top\rdblquote > bottom </a>\par
</body>\par
</html>\par
\par
\par
\par
\b\fs28 Images and adding images to web pages\par
\pard\sa200\sl480\slmult1\b0\fs22 Images make our web pages appear more eye catching and descriptive. It therefore plays an important role in web pages. To add image to a web page, we use the \cf1\i IMG SRC\cf0\i0  tag.\par
Type <img src=\rdblquote location or directory of image\rdblquote  > Where "img src" stands for image source followed in quotes by the URL of the image. e.g. \cf1\b <IMG src=\rdblquote c:\\pictures\\aks.jpg\rdblquote  align=\rdblquote top\rdblquote >\par
\cf0\fs28 Embedding Hyperlinks on images\line\b0\fs22 You can achieve this by enclosing the <img> tag pointing to the image by the anchor tags (<a></a>)\par
Type the following: <a href=\rdblquote www.yahoo.com\rdblquote ><\cf1\b  IMG src=\rdblquote c:\\pictures\\aks.jpg\rdblquote  align=\rdblquote top\rdblquote > \cf0 </a>\par
Adding Border to an image\par
\b0 This is done using the border attribute\b . \cf1 IMG src=\rdblquote c:\\pictures\\aks.jpg\rdblquote  align=\rdblquote top\rdblquote  border=\rdblquote 5\rdblquote >. \cf0\b0 This adds a solid border about the image.\par
Tables\par
A table is used in representing tabular data on a web page and also for web layout creation. It is inserted in a web page by the use of the <table> tag.\par
Commonly used attributes of< table> includes:\par
\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clcbpat5\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clcbpat5\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1\qc Attribute Name\cell Purpose\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 Border\cell Used to add border to the table.\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 TH\cell Used to assign headings to columns in the table\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 TR\cell Used to insert data into each cell of the table\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 Cell padding\cell Used to set spacing between the edges of the cell and its content\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 Cell spacing\cell Used to set spacing between cells\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 Align\cell  Used to set alignment of each cell\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 Row span\cell Used to span cell or heading across rows\cell\row\trowd\trgaph108\trleft-108\trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx3240\clbrdrl\brdrw15\brdrs\brdrcf4\clbrdrt\brdrw15\brdrs\brdrcf4\clbrdrr\brdrw15\brdrs\brdrcf4\clbrdrb\brdrw15\brdrs\brdrcf4 \cellx9468\pard\intbl\sl480\slmult1 Col span\cell Used to span cell or heading across columns\cell\row\pard\sa200\sl480\slmult1\par
Let us consider the following code snippet. The following code will create a table with three rows and three columns. The <TR> and </TR> tags define a row in a table as mentioned in the table above.\par
\pard\sa200\sl276\slmult1 <table>\line <TR>\par
<TH> Book name </TH>\par
<TH> Author </TH>\par
<TH> Price </TH>\par
</TR>\line <TR>\par
<TD> Chemistry textbook</TD>\par
<TD> Ababio</TD>\par
<TD> 4000k </TD>\par
</TR>\par
<TR>\par
<<TD> Purple Hibiscus</TD>\par
<TD> Chimamanda</TD>\par
<TD> 7000k </TD>\par
</TR>\par
</table>\par
\pard\sa200\sl480\slmult1\b\fs28 Adding border to a table\line\b0\fs22 The border attribute adds this feature to a table. <table border=\rdblquote 2\rdblquote  width=\rdblquote 200\rdblquote  >\par
\b\fs28 Aligning data in a table and applying formatting features to a table\par
\pard\sa200\sl276\slmult1\b0\fs22 Since the data are placed on table cells, the formatting would then be applied on the <TD> tag. \par
e.g. <TR>\par
<TD align =\rdblquote center\rdblquote > Chemistry textbook</TD>\par
<TD align =\rdblquote left\rdblquote > Ababio</TD>\par
<TD align=\rdblquote right\rdblquote > 4000k </TD>\par
<TR>\par
\b\fs28 FRAMES \par
\b0\fs22 With frames, one can divide the browser\rquote s widow into a number of sub-window which helps us display the information in an orderly way. Also, you can use frames to view different web pages t he same time.\par
In HTML, the <frameset> and <frame> elements are used in creating frames. The <frameset> element configures the frames, <frame> tag actually creates the frames.\par
Let us now learn the usage of <frameset><frame> elements. \par
<html>\par
<head><title> Using frames </title>\par
</head>\par
<frameset cols=\rdblquote 50%\rdblquote , \ldblquote 50%\rdblquote >\par
<frame src=\rdblquote http://www.google.com\rdblquote >\par
<frame src=\rdblquote http://www.conmasol.com\rdblquote >\par
</frameset>\par
</html>\par
On execution you get two columns on your web page displaying two different content : Conmasol website and Google homepage.\par
<html>\par
<head><title> Using frames </title>\par
</head>\par
<frameset rows=\rdblquote 50%\rdblquote , \ldblquote 50%\rdblquote >\par
<frame src=\rdblquote http://www.google.com\rdblquote >\par
<frame src=\rdblquote http://www.conmasol.com\rdblquote >\par
</frameset>\par
</html>\par
On execution you get two rows on your web page displaying two different content : Conmasol website and Google homepage.\par
\b\fs28 Forms\par
\b0\fs22 We are all conversant with forms and have filled one before. Admission form, application form, etc. A form is a collection of text boxes, buttons, radio buttons, checkboxes, and popup-menus that help us gather information about people.  Creating a from using the HTML needs careful planning of the layout of the form. We can create a form by performing the following steps :\par
Type the following codes:\par
<Html>\par
<Head>\par
<title> Forms</title>\par
</head>\par
<body>\par
<form method=\rdblquote post\rdblquote  action=\rdblquote register.htm\rdblquote >\par
</form>\par
</body>\par
</html>\par
\par
\b\fs28 Text box\par
\b0\fs22 A textbox is an empty box where the user can enter data for example, name and address.\par
Its inserted using the <input>.\par
<Input type =\rdblquote text\rdblquote  size=\rdblquote 3\rdblquote >\par
\b\fs28 Password box\par
\b0\fs22 When the user has to enter confidential information such as password then we use password box for the information. \par
<input type=\rdblquote password\rdblquote  name=\rdblquote pass\rdblquote >\par
\pard\sa200\sl480\slmult1\b\fs28 Check box\par
\b0\fs22 If you want the user to select from one or more options, you can use the checkbox  form element.\par
<Input type=\rdblquote checkbox\rdblquote  >  \par
\pard\sa200\sl276\slmult1 <Html>\par
<Head>\par
<title> Forms</title>\par
</head>\par
<body>\par
<form method=\rdblquote post\rdblquote  action=\rdblquote register.htm\rdblquote >\par
Name : <Input type =\rdblquote text\rdblquote  size=\rdblquote 3\rdblquote >\par
Type in a password : <input type=\rdblquote password\rdblquote  name=\rdblquote pass\rdblquote >\par
Choose from the following :\par
Banana  <Input type=\rdblquote checkbox\rdblquote  name=\rdblquote 1\rdblquote  > Apple <Input type=\rdblquote checkbox\rdblquote  name=\rdblquote 2\rdblquote > orange <Input type=\rdblquote checkbox\rdblquote   name=\rdblquote 3\rdblquote >   \par
</form>\par
</body>\par
</html>\par
\pard\sa200\sl480\slmult1 GOODLUCK TO YOUR WEB DESIGN CAREER!\par
\par
\par
\par
}